<template>
	<view v-if="show" class="xl-mask" :style="{'--top': $xl.parseUnit(top, 'rpx')}">
		<view class="xl-mask-bg" :style="{'--opacity': opacity, opacity: maskOpacity}" @tap.stop="clickMask" @touchmove.stop.prevent="()=>{}"></view>
		<xl-transition :show="innerShow" :class="position == 'relative' ? 'xl-mask-relative' :'xl-mask-fixed'" :enterMode="enterMode" :leaveMode="leaveMode" :duration="duration">
			<slot />
		</xl-transition>
	</view>
</template>

<script setup>
	import { ref, watch, computed} from 'vue'
	import propsData from './props.js'
	const props = defineProps(propsData)
	
	const emits = defineEmits(['update:modelValue','click'])
	
	const show = ref(false)
	const innerShow = ref(false)
	const maskOpacity = ref(0)
	let timer = null
	
	watch(() => props.modelValue, async (newValue, oldValue) => {
		if(newValue) {
			show.value = true
			innerShow.value = true
			await uni.$xl.sleep(30)
			maskOpacity.value = 1
		}else{
			hidden()
		}
	},{immediate: true})
	
	
	function clickMask() {
		if(props.clickClose){
			hidden()
		}
		emits('click')
	}
	
	function hidden(){
		innerShow.value = false
		maskOpacity.value = 0
		if (timer) clearTimeout(timer)
		timer = setTimeout(() => {
			// 等待动画完成
			emits('update:modelValue', false);
			show.value = false
			timer = null
		}, props.duration)
	}
</script>

<style lang="scss" scoped>
	.xl-mask{
		position: relative;
		z-index: v-bind(zIndex);
		.xl-mask-bg{
			position: fixed;
			top: var(--top);
			left: 0;
			width: 100%;
			height: calc(100% - var(--top));
			transition: opacity 0.5s;
			background-color: rgba(0, 0, 0, var(--opacity));
		}
		.xl-mask-relative{
			position: relative;
			z-index: 1;
		}
		.xl-mask-fixed{
			position: fixed;
			top: var(--top);
			width: 100%;
			z-index: 1;
		}
	}
</style>